import React, { useEffect, useState } from 'react';
import {getShowdata} from '../../api/pro'
import { Table, Image, Switch  } from 'antd';

const Recommend = () => {
  const [proList, setProList] = useState()

  // 当前页码
  const [current, setCurrent] = useState(1)
  // 每页显示的条数
  const [pageSize, setPageSize] = useState(5)

  useEffect(()=>{
    getShowdata({type: 'isrecommend', flag: '1'}).then(res => {
      // console.log(res);
      setProList(res.data)
    })
  }, [])


  const columns = [
    {
      title: '序号',
      render: (text, record, index)=>{
        return (<span>{(current - 1) * pageSize + index + 1}</span>)
      }
    },{
      title: '商品名称',
      dataIndex: 'proname'
    },{
      title: '商品图片',
      dataIndex: 'img1',
      render: (text, record, index)=>{
        return (<Image src={text} height={'50px'} />)
      }
    },{
      title: '商品分类',
      dataIndex: 'category'
    },{
      title: '商品品牌',
      dataIndex: 'brand'
    },{
      title: '商品价格',
      dataIndex: 'originprice',
      // 排序
      sorter: (a, b) => a.originprice - b.originprice,
      showSorterTooltip: {
        title: '点击排序'
      }
    },{
      title: '商品折扣',
      dataIndex: 'discount',
      sorter: (a, b) => a.discount - b.discount,
      showSorterTooltip: {
        title: '点击排序'
      }
    },{
      title: '商品库存',
      dataIndex: 'stock',
      sorter: (a, b) => a.stock - b.stock,
      showSorterTooltip: {
        title: '点击排序'
      }
    },{
      title: '是否推荐',
      dataIndex: 'isrecommend',
      render: (text)=>{
        return (<Switch defaultChecked={text}></Switch>)
      }
    }
  ]



  return (
    <div>
      推荐列表

      <Table
        dataSource={proList}
        scroll={{
          x: 1500,
        }}
        pagination= {{
          defaultPageSize: 5,
          current,
          showSizeChanger: false,
          onChange: (page, pageSize)=>{
            // 设置当前页
            setCurrent(page)

            setPageSize(pageSize)
          }
        }}
        rowKey='proid'
        columns={columns}
      />
    </div>
  );
};

export default Recommend;
